import { useStores } from '@/stores';
import { Button, Input } from 'antd';
import { FC, Ref, useRef, useState } from 'react';
import FlawFilterDialog from '@/components/FlawFilter/index';
import './index.less';
import { FlawFilterDialogT, FlawFilterType } from '@/typings/global';
import { getSelectPanelBack } from '@/api/lot-detail-page';
import { observer } from 'mobx-react-lite';
import { MessageWaring } from '@/utils/tool';
import FlawFilterPmp from '@/components/FlawFilterPmp';

export interface LotHeadInfoConf {
  onRef: Ref<any> | undefined;
  reRender: (layerId: string, lotId: string) => void;
}

const LotHeadInfo: FC<LotHeadInfoConf> = (LotHeadInfoProps: LotHeadInfoConf) => {
  const { lotStore, commonStore } = useStores();
  const flawFilterRef = useRef<any>(null);
  const [panelId, setPanelId] = useState('');
  const flawRef = useRef<any>(null);

  const openFlawFilter = () => {
    flawFilterRef.current.setShowFiledDialog(true);
  };
  //   查询panel
  const searchPanel = async () => {
    if (!panelId || !panelId.trim()) {
      MessageWaring('查询条件不能为空');
      return;
    }
    const searchResult = await getSelectPanelBack({ panelId, lotId: lotStore.lotId, pageSize: lotStore.sheet.pageSize });
    const { pageNum, sheetId } = searchResult.data;
    if (lotStore.sheet.currentPage == pageNum && lotStore.sheet.sheetId == sheetId) {
      return;
    }
    lotStore.changeSheetListReq(lotStore.lotId, commonStore, sheetId, pageNum);
  };

  const reRenderData = () => {
    LotHeadInfoProps.reRender(lotStore.layerId, lotStore.lotId);
  };

  //   打开前制程缺陷筛选的Dialog
  const openPmpFlaw = () => {
    flawRef?.current.showModal();
  };
  return (
    <div className="lot-head-info">
      <div className="title-info">
        {Object.keys(lotStore.lotHeadInfo).map((key: any) => (
          <div className="list" key={lotStore.lotHeadInfo[key].key}>
            <span>{lotStore.lotHeadInfo[key].label}:</span>
            <span>{lotStore.lotHeadInfo[key].value}</span>
          </div>
        ))}
      </div>
      <div className="search-bar">
        <div className="lable">Panel查询：</div>
        <Input
          className="panel-id-input"
          allowClear={true}
          value={panelId}
          onChange={val => {
            setPanelId(val.target.value);
          }}
          width={200}
        ></Input>
        {/* <Input defaultValue={'tucheng01'} ref={layerIdRef} placeholder={'请输入涂层批号'} style={{ width: '280px', marginRight: '10px' }} /> */}
        <Button type={'primary'} onClick={() => searchPanel()} className="btn">
          查询
        </Button>
        <Button type={'primary'} onClick={() => openFlawFilter()} className="btn">
          缺陷筛选
        </Button>
      </div>
      <FlawFilterDialog onRef={flawFilterRef} type={FlawFilterDialogT.lotDetail} onSubmit={reRenderData} openPmpFlaw={openPmpFlaw}></FlawFilterDialog>
      <FlawFilterPmp onRef={flawRef} type={FlawFilterType.lotId}></FlawFilterPmp>
    </div>
  );
};
export default observer(LotHeadInfo);
